<div class="container">
    <div class="row grid-container">
        <div class="col-md-10">
            <div class="table">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>&nbsp;</th>
                            <th (click)="sort('firstName')">First Name</th>
                            <th (click)="sort('lastName')">Last Name</th>
                            <th (click)="sort('address')">Address</th>
                            <th (click)="sort('city')">City</th>
                            <th (click)="sort('state.name')">State</th>
                            <th (click)="sort('orderTotal')">Order Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let customer of customers;trackBy:trackby.customer">
                            <td><img src="assets/images/{{ customer.gender | lowercase }}.png"
                                    class="card-image" alt="Customer Image" /></td>
                            <td><a [routerLink]="['/customers',customer.id]">{{ customer.firstName | capitalize }}</a></td>
                            <td>{{ customer.lastName | capitalize }}</td>
                            <td>{{ customer.address }}</td>
                            <td>{{ customer.city | trim }}</td>
                            <td>{{ customer.state.name }}</td>
                            <td>{{ customer.orderTotal | currency:'USD':true }}</td>
                        </tr>
                        <tr *ngIf="!customers.length">
                            <td>&nbsp;</td>
                            <td colspan="6">No Records Found</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
